{extend name='comm/base' /}
{block name='css'}
<link rel="stylesheet" href="__editor_css__/samples.css">
<link rel="stylesheet" href="__editor_root__/samples/toolbarconfigurator/lib/codemirror/neo.css">
{/block}

{block name='header'}
{include file='comm/header'}
{/block}

{block name='slider'}
{include file='comm/slider'}
{/block}

{block name='main'}
<div class="main-content">
    <div class="main-content-inner">
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="#">系统设置</a>
                </li>
                <li class="active">订单管理</li>
            </ul><!-- /.breadcrumb -->
        </div>
        <div class="page-content">
            <form class="form-horizontal" role="form">
                <div class="form-group"><image src="{$image}" /></div>
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" > 多选按钮:</label>
                    <div class="col-sm-9">
                        <label class="checkbox-inline">
                            <input name="auth" type="checkbox" class="ace" value="1">
                            <span class="lbl"> choice 1</span>
                        </label>
                        <label class="checkbox-inline">
                            <input name="auth" type="checkbox" class="ace" value="2">
                            <span class="lbl"> choice 2</span>
                        </label>
                        <label class="checkbox-inline">
                            <input name="auth" type="checkbox" class="ace" value="3">
                            <span class="lbl"> choice 3</span>
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" > 上传图片:</label>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <div class="col-xs-12">
                                <input type="file" id="upload_img" accept="image/*"/>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="space-4"></div>
                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" > 富文本:</label>
                    <div class="col-sm-9">
                        <div class="adjoined-bottom">
                            <div class="col-xs-20">
                                <div class="grid-container">
                                    <div class="grid-width-100">
                                        <div id="editor">
                                            <h1>Hello world!</h1>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="clearfix form-actions">
                    <div class="col-md-offset-3 col-md-9">
                        <button class="btn btn-primary" type="button" id="save_btn">
                            保存
                        </button>
                    </div>
                </div>
            </form>


        </div><!-- /.page-content -->
    </div>
</div><!-- /.main-content -->
{/block}

{block name='footer'}
{include file='comm/footer'}
{/block}
{block name='script'}

<script src="__editor_root__/ckeditor.js"></script>
<script src="__editor_js__/sample.js"></script>
<script src="__ace_js__/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="__ace_js__/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
    if('ontouchstart' in document.documentElement) document.write("<script src='__ace_js__/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="__ace_js__/bootstrap.min.js"></script>

<!-- ace scripts -->
<script src="__ace_js__/ace-elements.min.js"></script>
<script src="__ace_js__/ace.min.js"></script>
<script src="__ace_js__/chosen.jquery.min.js"></script>
<script>
    initSample();
    /*
    * {
        style: !1,
        no_file: "No File ...",
        no_icon: "fa fa-upload",
        btn_choose: "Choose",
        btn_change: "Change",
        icon_remove: "fa fa-times",
        droppable: !1,
        thumbnail: !1,
        allowExt: null,
        denyExt: null,
        allowMime: null,
        denyMime: null,
        maxSize: !1,
        previewSize: !1,
        previewWidth: !1,
        previewHeight: !1,
        before_change: null,
        before_remove: null,
        preview_error: null
    }
*/
    jQuery(function() {
        $('#upload_img').ace_file_input({
            style: 'well',
            btn_choose: '上传图片',
            btn_change: null,
            no_icon: 'ace-icon fa fa-cloud-upload',
            droppable: true,
            thumbnail: 'fit',// small large | fit
            allowExt:["jpeg", "jpg", "png", "gif" , "bmp"],
            allowMime: ["image/jpg", "image/jpeg", "image/png", "image/gif", "image/bmp"],
            maxSize:3072000,
            preview_error: function (filename, error_code) {
                var msg = '未知错误';
                switch(error_code){
                    case 2:
                        msg = '图片加载失败';
                        break;
                    case 3:
                        msg = '缩略图加载失败';
                        break;
                    default:
                        break;
                }
                swal({
                    type: 'error', // 弹框类型
                    title: msg, //标题
                    confirmButtonColor: '#438EB9',// 确定按钮的 颜色
                    confirmButtonText: '确定',// 确定按钮的 文字
                });
            }
        }).on('change', function () {
            //console.log($(this).data('ace_input_files'));
            //console.log($(this).data('ace_input_method'));
        });
        check_upload();
        function check_upload(){
            var file_input = $('#upload_img');
            file_input.ace_file_input('reset_input');
            file_input
                .off('file.error.ace')
                .on('file.error.ace', function(e, info) {
                    if(info.error_list['ext']){
                        swal({
                            type: 'error', // 弹框类型
                            title: '只能上传["jpeg","jpg","png","gif","bmp"]格式的图片', //标题
                            confirmButtonColor: '#438EB9',// 确定按钮的 颜色
                            confirmButtonText: '确定',// 确定按钮的 文字
                        });
                    }else if(info.error_list['mime']){
                        swal({
                            type: 'error', // 弹框类型
                            title: '错误的mime类型', //标题
                            confirmButtonColor: '#438EB9',// 确定按钮的 颜色
                            confirmButtonText: '确定',// 确定按钮的 文字
                        });
                    }else if(info.error_list['size']){
                        swal({
                            type: 'error', // 弹框类型
                            title: '请上传小于3M的图片',//标题
                            confirmButtonColor: '#438EB9',// 确定按钮的 颜色
                            confirmButtonText: '确定',// 确定按钮的 文字
                        });
                    }
                });
            file_input
                .off('file.preview.ace')
                .on('file.preview.ace', function(e, info) {
                    // console.log(info.file.width);
                    // console.log(info.file.height);
                    // e.preventDefault();//to prevent preview
                });
        }

        $('#save_btn').click(function(){
            var auth_arr = [];
            $('input[name = "auth"]:checked').each(function(){
                auth_arr.push($(this).val());
            })
            var formData = new FormData();
            formData.append('auth',auth_arr);
            formData.append('img',$('#upload_img')[0].files[0]);
            formData.append('detail',CKEDITOR.instances.editor.getData());
            $.ajax({
                url:"{:url('do.editor')}",
                type:'POST',
                data: formData,
                dataType:'JSON',
                processData: false,//不处理数据
                contentType: false,//不处理内容类型
                success:function(result){
                    if(result.code == 1){
                        swal({
                            type: 'success', // 弹框类型
                            title: '操作成功', //标题
                            confirmButtonColor: '#438EB9',// 确定按钮的 颜色
                            confirmButtonText: '确定',// 确定按钮的 文字
                        }).then((isConfirm) => {
                            //判断 是否 点击的 确定按钮
                            if (isConfirm.value) {
                                location.href = "{:url('admin.menu.index')}";
                            }
                        });
                    }else{
                        swal({
                            type: 'warning', // 弹框类型
                            title:result.msg, //标题
                            confirmButtonColor: '#438EB9',// 确定按钮的 颜色
                            confirmButtonText: '确定',// 确定按钮的 文字
                        });
                    }
                    return false;
                },error:function(e){
                    swal({
                        type: 'error', // 弹框类型
                        title:e.msg, //标题
                        confirmButtonColor: '#438EB9',// 确定按钮的 颜色
                        confirmButtonText: '确定',// 确定按钮的 文字
                    });
                }
            })
        });
    });
</script>
{/block}






